<template>
  <el-card  class="box-card scroll-item" v-scroll-reveal.reset shadow="always">
    <div slot="header" class="d-flex align-items-center">
      <i class="iconfont icon-link"></i>
      <span>{{$t('friend.friend')}}</span>
      <el-button class="ml-auto" style="float: right; padding: 3px 0" type="text">
        <router-link to="/link" tag="span">{{$t('friend.exchange')}}</router-link>
      </el-button>
    </div>
    <div class="text item">
        <el-link target='_blank' :underline="false"  v-for="item in links" :href="item.href"  :key="item.id">{{item.name}}</el-link>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Friend',
  props: {
    links: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.el-card
    i
        font-size 20px
        color #e13455
        font-weight bold
    span
        font-weight bold
    .item
      width 100%
      .el-link
        width 50%
        display inline-block
        text-align center 
</style>
